<template>
  <div class="products-container">
    <!-- 产品分类侧边栏 -->
    <aside class="product-categories">
      <h2>{{ $t('products.categories') }}</h2>
      <ul>
        <li 
          v-for="category in productCategories" 
          :key="category.id"
          :class="{ active: selectedCategory === category.id }"
          @click="selectCategory(category.id)"
        >
          {{ category.name }}
        </li>
      </ul>
    </aside>

    <!-- 主产品展示区 -->
    <main class="product-list">
      <router-view></router-view>
      <div class="factory-info">
        <div class="certifications">
          <h3>{{ $t('products.certifications') }}</h3>
          <div class="badges">
            <img 
              v-for="cert in factoryCertifications" 
              :key="cert" 
              :src="`/assets/certifications/${cert}.png`" 
              :alt="cert"
              class="cert-badge"
            >
          </div>
        </div>
        
        <div class="capacity">
          <h3>{{ $t('products.production_capacity') }}</h3>
          <ul>
            <li v-for="(value, key) in productionCapacity" :key="key">
              <strong>{{ $t(`products.${key}`) }}:</strong> {{ value }}
            </li>
          </ul>
        </div>
      </div>

      <div class="search-box">
        <input 
          v-model="searchQuery" 
          :placeholder="$t('products.search_placeholder')"
          type="search"
        >
      </div>

      <div class="products-grid">
        <div 
          v-for="product in filteredProducts" 
          :key="product.id"
          class="product-card"
        >
          <div class="product-image">
            <img 
              :src="product.thumbnail" 
              :alt="product.name"
              loading="lazy"
            >
            <div class="material-tags">
              <span v-for="material in product.materials" :key="material">
                {{ material }}
              </span>
            </div>
          </div>
          <div class="product-info">
            <h3>{{ product.name }}</h3>
            <p class="specs">{{ product.specifications }}</p>
            <div class="technical-details">
              <div>
                <label>{{ $t('products.thickness') }}:</label>
                <span>{{ product.thickness }}</span>
              </div>
              <div>
                <label>{{ $t('products.moq') }}:</label>
                <span>{{ product.moq }}</span>
              </div>
            </div>
            <button class="inquiry-btn" @click="handleInquiry(product)">
              {{ $t('products.request_sample') }}
            </button>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { useFactoryStore } from '@/store/factoryInfo.js'

export default {
  name: 'ProductsView',
  setup() {
    const factoryStore = useFactoryStore()
    return { factoryStore }
  },
  data() {
    return {
      selectedCategory: null,
      searchQuery: ''
    }
  },
  computed: {
    factoryCertifications() {
      return this.factoryStore.factoryCertifications
    },
    productionCapacity() {
      return this.factoryStore.productionCapacity
    },
    productCategories() {
      return this.factoryStore.getAllProductCategories
    },
    
    filteredProducts() {
      let products = this.factoryStore.getProductsByCategory(this.selectedCategory)
      
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        products = products.filter(p => 
          p.name.toLowerCase().includes(query) ||
          p.materials.some(m => m.toLowerCase().includes(query)) ||
          p.specifications.toLowerCase().includes(query)
        )
      }
      
      return products
    }
  },
  methods: {
    selectCategory(categoryId) {
      this.selectedCategory = categoryId
    },
    handleInquiry(product) {
      this.$router.push({
        name: 'contact-us',
        query: { 
          product: product.id,
          type: 'sample-request'
        }
      })
    }
  }
}
</script>

<style scoped>
.products-container {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.product-categories {
  flex: 0 0 250px;
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
}

.product-categories h2 {
  margin-bottom: 1rem;
  color: #2c3e50;
}

.product-categories ul {
  list-style: none;
  padding: 0;
}

.product-categories li {
  padding: 0.8rem;
  margin: 0.5rem 0;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}

.product-categories li:hover,
.product-categories li.active {
  background: #e9ecef;
}

.product-list {
  flex: 1;
}

.search-box {
  margin-bottom: 2rem;
}

.search-box input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.factory-info {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.certifications h3,
.capacity h3 {
  margin-top: 0;
  color: #2c3e50;
  font-size: 1.2rem;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.cert-badge {
  height: 50px;
  width: auto;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.capacity ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.capacity li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
}

.capacity li:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  .factory-info {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.product-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  position: relative;
  height: 250px;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.material-tags {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  gap: 0.5rem;
}

.material-tags span {
  background: rgba(255,255,255,0.9);
  padding: 0.3rem 0.6rem;
  border-radius: 20px;
  font-size: 0.8rem;
}

.product-info {
  padding: 1.5rem;
}

.product-info h3 {
  margin: 0 0 0.5rem;
  color: #2c3e50;
}

.specs {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.technical-details {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.technical-details div {
  display: flex;
  justify-content: space-between;
}

.technical-details label {
  color: #666;
}

.technical-details span {
  font-weight: 500;
}

.inquiry-btn {
  width: 100%;
  padding: 0.8rem;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.inquiry-btn:hover {
  background: #2980b9;
}

@media (max-width: 768px) {
  .products-container {
    flex-direction: column;
    padding: 1rem;
  }
  
  .product-categories {
    flex: none;
  }
}
</style>
